<script setup>
import { showToast } from 'vant';
import { ref } from 'vue'

const actions = [
    { text: '内容质量差', icon: '/icon_home/caiyicai.png' },
    { text: '不感兴趣', icon: '/icon_home/cha.png' },
    { text: '不喜欢该作者', icon: '/icon_home/dislike-line.png' },
    { text: '内容重复', icon: '/icon_home/gantanhao-xianxingyuankuang.png' },
];
const props = defineProps(['content'])
const emit = defineEmits(['share'])

</script>

<template>
    <div class="content" v-for="(i, index) in content" :key="i.id">
        <template v-if="i.type === '0001'">
            <div class="inner_0001 inner">
                <div class="left">
                    <div class="title van-multi-ellipsis--l3">{{ i.title }}</div>
                    <div class="left_bottom">
                        <div class="left_bottom_left">
                            <div class="auther">
                                {{ i.auther }}
                            </div>
                            <div class="commit">{{ i.commit }}</div>
                            <div class="time">{{ i.time }}</div>
                        </div>

                        <van-popover v-model:show="i.showUnlike" :actions="actions" @select="showToast('系统将减少推荐此类内容')">
                            <template #reference>
                                <van-icon size="0.12rem" name="ellipsis" />

                            </template>
                        </van-popover>
                    </div>
                </div>
                <div class="right">
                    <van-image :src="i.img_preview" />
                </div>

            </div>
        </template>
        <template v-else-if="i.type === '1000'">
            <div class="inner_1000 inner">
                <div class="title van-multi-ellipsis--l2">{{ i.title }}</div>
                <van-image :src="i.img_preview" />
                <div class="bottom">
                    <div class="bottom_left">
                        <div class="auther">{{ i.auther }}</div>
                        <div class="time">{{ i.time }}</div>
                    </div>
                    <van-popover placement="bottom-end" v-model:show="i.showUnlike" :actions="actions"
                        @select="showToast('系统将减少推荐此类内容')">
                        <template #reference>
                            <van-icon size="0.12rem" name="ellipsis" />

                        </template>
                    </van-popover>
                </div>
            </div>
        </template>
        <template v-else-if="i.type === '0002'">
            <div class="inner_0002 inner">
                <div class="title van-multi-ellipsis--l2">{{ i.title }}</div>
                <van-image :src="i.img_preview" />
                <div class="bottom">
                    <div class="bottom_left">
                        <div class="auther">{{ i.auther }}</div>
                        <div class="time">{{ i.time }}</div>
                    </div>
                    <van-popover placement="bottom-end" v-model:show="i.showUnlike" :actions="actions"
                        @select="showToast('系统将减少推荐此类内容')">
                        <template #reference>
                            <van-icon size="0.12rem" name="ellipsis" />

                        </template>
                    </van-popover>
                </div>
            </div>
        </template>
        <template v-else-if="i.type === '0003'">
            <div class="inner_0003 inner">
                <div class="top">
                    <div class="top_left">
                        <van-icon size="0.34rem" name="/icon_home/dog.jpg" />
                        <div class="top_left_info">
                            <div class="username">{{ i.username }}</div>
                            <div class="time">{{ i.time }}</div>
                        </div>
                    </div>
                    <div class="subscribe" v-show="i.is_subscribe">已关注</div>
                    <van-button round @click="i.is_subscribe = true" v-show="!i.is_subscribe">关注</van-button>

                </div>
                <div class="text">{{ i.text }}</div>
                <van-image :src="i.img_preview" />
                <div class="bottom">
                    <div class="bottom_left">
                        <div class="share" @click="$emit('share')"><van-icon name="share-o" size="0.16rem" />分享</div>
                        <div class="bottom_left_commit"><van-icon name="chat-o" size="0.16rem" />{{ i.commit }}</div>
                        <div class="recommend_num"><van-icon name="good-job-o" size="0.16rem" />{{ i.recommend_num }}
                        </div>
                    </div>
                    <van-popover placement="left-end" v-model:show="i.showUnlike" :actions="actions"
                        @select="showToast('系统将减少推荐此类内容')">
                        <template #reference>
                            <van-icon size="0.12rem" name="ellipsis" />

                        </template>
                    </van-popover>
                </div>
            </div>
        </template>
        <template v-else-if="i.type === '0002a'">
            <div class="inner_0002a inner">
                <div class="inner_0002a_top">
                    <div class="inner_0002a_top_left">
                        <van-icon name="contact-o" size="0.2rem" />
                        <div class="auther">{{ i.auther }}</div>
                    </div>
                    <div class="inner_0002a_top_right">
                        <div class="inner_0002a_subscribe" @click="i.is_subscribe = true"
                            :class="i.is_subscribe ? 'subscribe' : 'not_subscribe' ">{{ i.is_subscribe ? '已关注' : '关注' }}</div>
                        <van-popover placement="bottom-end" v-model:show="i.showUnlike" :actions="actions"
                            @select="showToast('系统将减少推荐此类内容')">
                            <template #reference>
                                <van-icon size="0.12rem" name="ellipsis" />
                            </template>
                        </van-popover>
                    </div>
                </div>
                <div class="inner_0002a_title van-multi-ellipsis--l2">
                    {{ i.title }}
                </div>
                <van-image :src="i.img_preview" />
                <div class="inner_0002a_bottom">
                    <div class="share" @click="$emit('share')"><van-icon name="share-o" size="0.16rem" />分享</div>
                    <div class="collect"><van-icon size="0.16rem" name="star-o" />收藏</div>
                    <div class="bottom_left_commit"><van-icon name="chat-o" size="0.16rem" />{{ i.commit }}</div>
                    <div class="recommend"><van-icon name="good-job-o" size="0.16rem" />赞
                    </div>

                </div>
            </div>
        </template>
        <template v-else-if="!i.type">
            <div class="inner_hot inner">
                <div class="no" :class="index < 3 ? 'hot_no1_to_no3' : 'hot_other'">{{ index + 1 }}</div>
                <div class="info">
                    <div class="inner_hot_title van-multi-ellipsis--l2">{{ i.title }}</div>
                    <div class="inner_hot_info_bottom">
                        <div class="inner_hot_read_num">
                            {{ i.read_num }}
                        </div>
                        <div class="inner_hot_auther">{{ i.auther }}</div>
                    </div>
                </div>
                <div class="img_preview"><van-image :src="i.img_preview" /></div>
            </div>
        </template>
    </div>
</template>
<style scoped lang="scss">
.content {
    margin-bottom: 0.1rem;

    .inner {
        padding: 0.14rem;
        background-color: white;
        border-radius: 0.08rem;
    }

    .inner_0001 {
        display: flex;
        justify-content: space-between;

        .left {
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title {
                font-size: 0.14rem;
                margin-bottom: 0.1rem;
            }

            .left_bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 0.11rem;
                color: gray;

                .left_bottom_left {
                    display: flex;

                    .time,
                    .commit,
                    .auther {
                        margin-right: 0.06rem;
                    }
                }

            }
        }

        .right {
            width: 30%;
        }
    }

    .inner_1000 {
        // height: 2.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            margin-bottom: 0.1rem;
        }

        .van-image {
            border-radius: 0.08rem;
            overflow: hidden;
            margin-bottom: 0.1rem;
        }

        .bottom {
            font-size: 0.11rem;
            display: flex;
            justify-content: space-between;
            color: gray;

            .bottom_left {
                display: flex;

                .auther {
                    margin-right: 0.06rem;
                }
            }
        }
    }

    .inner_0002 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            margin-bottom: 0.1rem;
        }

        .van-image {
            border-radius: 0.08rem;
            overflow: hidden;
            margin-bottom: 0.1rem;
        }

        .bottom {
            font-size: 0.11rem;
            display: flex;
            justify-content: space-between;
            color: gray;

            .bottom_left {
                display: flex;

                .auther {
                    margin-right: 0.06rem;
                }
            }
        }
    }

    .inner_0003 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.1rem;

            .top_left {
                display: flex;

                .van-icon {
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 0.12rem;
                }

                .top_left_info {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .time {
                        font-size: 0.12rem;
                        color: gray;
                    }
                }
            }



            .van-button {
                width: 0.6rem;
                height: 0.26rem;
                font-size: 0.12rem;
            }
        }

        .text {
            margin-bottom: 0.1rem;
        }

        .van-image {
            width: 80%;
            margin-bottom: 0.1rem;
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .bottom_left {
                display: flex;
                align-items: center;
                font-size: 0.12rem;

                .van-icon {
                    margin-right: 0.02rem;
                }

                .share,
                .bottom_left_commit {
                    margin-right: 0.38rem;
                }
            }
        }
    }

    .inner_0002a {
        display: flex;
        flex-direction: column;

        .inner_0002a_top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.1rem;

            .inner_0002a_top_left {
                display: flex;
                align-items: center;

                .auther {
                    font-size: 0.12rem;
                    margin-left: 0.1rem;
                }
            }

            .inner_0002a_top_right {
                display: flex;
                align-items: center;

                .inner_0002a_subscribe {
                    font-size: 0.12rem;
                    margin-right: 0.2rem;
                }
                .not_subscribe{
                    color: #FF644D;

                }
            }
        }

        .inner_0002a_title {
            margin-bottom: 0.1rem;
        }

        .van-image {
            border-radius: 0.08rem;
            overflow: hidden;
            margin-bottom: 0.1rem;
        }

        .inner_0002a_bottom {
            display: flex;
            justify-content: space-between;

            .recommend,
            .bottom_left_commit,
            .share,
            .collect {
                // flex: 1;
                font-size: 0.12rem;
            }
        }
    }

    .inner_hot {
        display: flex;
        justify-content: space-between;

        .info {
            flex: 1;
            margin: 0 0.1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .inner_hot_info_bottom {
                font-size: 0.11rem;
                display: flex;
                align-items: center;

                .inner_hot_read_num {
                    color: #FF644D;
                    margin-right: 0.06rem;
                }

                .inner_hot_auther {
                    color: gray;
                }
            }
        }

        .img_preview {
            width: 1rem;
        }
    }
}

.hot_no1_to_no3 {
    color: #FF644D;
    font-weight: bold;
}

.hot_other {
    color: gray;
}

.subscribe {
    color: gray;
}
</style>